<template>
  <div class="x-footer">
    <div class="x-footer--wrap clearfix" :style="{ maxWidth: maxWidth }">
      <div class="base--info">
        <div class="base--info__item follow clearfix">
          <span class="item--label">FOLLOW US</span>
          <div class="item--main clearfix">
            <a class="c-share" v-for="item in shareConfig" :href="item.url" :title="item.title">
              <i class="c-share__icon"
                :style="getShareStyle(item)"></i>
            </a>
            <span :class="{'c-share': true, 'c-share__wx': true, active: showWx}"
              @click.stop="openWx" title="weixin">
              <i class="c-share__icon"
                style="background-position: -81px 0; width: 24px; height: 20px"></i>
            </span>
          </div>

          <transition name="fade-slide">
            <div class="c-wx" v-if="showWx">
              <img src="../assets/wx.jpg" width="220" height="220" alt="weixin">
            </div>
          </transition>
        </div>
        <div class="base--info__item call clearfix">
          <div class="call__tel clearfix">
            <span class="item--label">TEL :</span>
            <span class="item--main">+86 400-008-2811</span>
          </div>
          <div class="call__email clearfix">
            <span class="item--label">E-mail :</span>
            <span class="item--main">jobs@i2edu.cn</span>
          </div>
        </div>
        <div class="base--info__item copyright">
          <p class="copyright__text">©2016 i2edu.cn. All rights reserved.</p>
        </div>
      </div>
      <div class="base--link clearfix">
        <div class="base--link__item" v-for="item in linkConfig">
          <a class="base--link__url" :href="item.url">
            <span class="base--link__icon" :style="getLinkStyle(item)"></span>
            <span class="base--link__text">{{ item.value }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { shareConfig, linkConfig } from '../config/footer.config'

  export default {
    props: {
      maxWidth: {
        type: String,
        default: '1370px'
      }
    },
    data() {
      return {
        showWx: false,
        shareConfig,
        linkConfig,
      }
    },
    mounted() {
      $(document).on('click.wx', (e) => {
        if(this.showWx) {
          this.showWx = false
        }
      })
    },
    destroyed() {
      $(document).off('click.wx')
    },
    methods: {
      // 打开微信二维码
      openWx() {
        this.showWx = true
      },
      getShareStyle({ style }) {
        const { x, y, width, height } = style;

        return {
          backgroundPosition: `${x} ${y}`,
          width,
          height,
        }
      },
      getLinkStyle({ style }) {
        const { x, y } = style;

        return {
          backgroundPosition: `${x} ${y}`,
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .fade-slide-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: all .3s;
  }
  .fade-slide-enter {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
    transition: all .3s;
  }
  .fade-slide-leave {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: all .3s;
  }
  .fade-slide-leave-active {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
    transition: all .3s;
  }

  .base--link {
    padding-top: 86px;
  }
  .base--link__item {
    float: right;
    margin-right: 30px;
    text-align: center;
    &:first-child {
      margin-right: 0;
    }
  }
  .base--link__text {
    display: block;
    margin-top: 10px;
  }
  .base--link__url {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
  }
  .base--link__icon {
    display: block;
    width: 33px;
    height: 32px;
    margin: 0 auto;
    background-image: url("../assets/footer_sprite.png");
    background-repeat: no-repeat;
  }

  .base--info {
    position: relative;
    width: 50%;
    float: left;
  }
  .base--link {
    width: 50%;
    float: right;
  }

  .x-footer {
    background: #353038;
    color: #fff;
    height: 244px;
    position: relative;
    z-index: 200;
    .c-wx {
      position: absolute;
      top: -170px;
      left: 220px;
      width: 220px;
      height: 220px;
      z-index: 100;
      box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
    }
  }

  .x-footer--wrap {
    margin: 0 auto;
    padding: 0 75px;
  }

  .item--label,
  .item--main,
  .call__tel,
  .call__email {
    float: left;
  }

  .call__email {
    margin-left: 30px;
  }

  .item--label {
    font-size: 16px;
    line-height: 25px;
    margin-right: 20px;
  }

  .item--main {
    line-height: 25px;
    opacity: .7;
  }

  .c-share {
    cursor: pointer;
    float: left;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 22px;
    &:first-child {
      margin-left: 0;
    }
    .c-share__icon {
      opacity: .7;
      display: block;
      background-image: url("../assets/footer_sprite.png");
      background-repeat: no-repeat;
      transition: opacity .3s;
      &:hover {
        opacity: 1;
      }
    }
  }
  .c-share__wx {
    &.active {
      .c-share__icon {
        opacity: 1;
      }
    }
  }

  .copyright__text {
    font-size: 12px;
    color: #fff;
  }

  .base--info__item {
    margin-top: 20px;
    &:first-child {
      margin-top: 0;
      padding-top: 75px;
    }
  }

  // x-discover hack
  .x-discover {
    .x-footer {
      height: 160px;
      .c-wx {
        top: -210px;
      }
      .base--info__item:first-child {
        padding-top: 30px;
      }
      .base--link {
        padding-top: 40px;
      }
    }
  }
</style>
